<template>
  <div class="personrec">
    <div class="title">人气推荐</div>
    <ul>
      <li v-for="item in hotGoodsList" :key="item.id" @click="goToDetail(item.id)">
        <div class="image">
          <img v-lazy="item.list_pic_url" width="100%" style="display: block;" alt="">
        </div>
        <div class="text">
          <h4>{{item.name}}</h4>
          <h5>{{item.goods_brief}}</h5>
          <p>{{item.retail_price | filtermoney}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PersonRecomed',
  props: ['hotGoodsList'],
  methods: {
    // 跳转到商品详情页
    async goToDetail(id) {
      await this.$router.push('/productdetail/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.personrec {
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: .2rem;
}
ul {
  li {
    background: #fafafa;
    margin-bottom: 5px;
    overflow: hidden;
    .image {
      float: left;
      width: 30%;
    }
    .text {
      float: left;
      width: 70%;
      height: 100%;
      h4 {
        height: 40px;
        line-height: 40px;
        font-weight: normal;
        font-size: .18rem;
      }
      h5 {
        height: 30px;
        line-height: 30px;
        font-weight: normal;
      }
      P {
        margin-top: 10px;
        color: darkred;
        font-size: .13rem;
      }
    }
  }
}






    // h4 {
    //   position: absolute;
    //   left: .1rem;
    //   top: 10px;
    //   font-weight: normal;
    // }
    // p {
    //   position: absolute;
    //   left: .1rem;
    //   top: 40px;
    //   color: darkred;
    // }
</style>